<template>
  <div class="wechat mt-list">

    <div class="mt-list-filter">
      <el-form ref="form" :model="filter" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="客服名称">
              <mt-input v-model="filter.name" :width="inputWidth"></mt-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <div class="mt-list-filter-btn">
              <mt-button @click="addBtn">新建</mt-button>
              <mt-button>搜索</mt-button>
              <mt-button type="submain">重置</mt-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <el-table
      :data="list"
      height="auto"
      class="mt-list-table table">
      <el-table-column prop="id" label="客服id" min-width="180"></el-table-column>
      <el-table-column prop="name" label="客服名称" min-width="180"></el-table-column>
      <el-table-column prop="avatar" label="客服头像" min-width="180"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="180"></el-table-column>
      <el-table-column prop="createBy" label="创建人" min-width="180"></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template v-slot="scope">
          <mt-button type="table" @click="goEdit(scope.row)">编辑</mt-button>
          <mt-button type="table" @click="goDelete(scope.row)">删除</mt-button>
          <mt-button type="table" @click="getLink(scope.row)">生成链接</mt-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="mt-list-footer">
      <div class="totaldata">共{{ total }}条</div>
      <div class="page">
        <el-pagination
          style="float: right"
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="pageSizes"
          :total="total"
          background
          :layout="pageLayout"
          class="mt-page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>

    <wechat-dialog ref="wechatDialog"></wechat-dialog>

  </div>
</template>

<script>
import WechatDialog from "./dialog.vue";
import { listMixin } from "@/mixins/list-mixins";
export default {
  name: "WechatList",

  components: { WechatDialog },

  data () {
    return {
      filter: {
        name: ""
      },

      inputWidth: "calc(100% - 1rem)"
    };
  },

  mixins: [ listMixin ],

  created () {
    this.readList();
  },

  mounted () {},

  methods: {
    /* 获取列表 */
    async readList () {
      this.$request.post("/mock/getWechatList").then(res => {
        console.log("accountList:", res);
        this.list = res;
      });
    },

    /* 新建按钮 */
    addBtn () {
      this.$refs.wechatDialog.open("add");
    },
    /* 编辑按钮 */
    goEdit (item) {
      this.$refs.wechatDialog.open("edit", item);
    },
    /* 删除按钮 */
    goDelete (item) {
      this.$confirm("是否删除该账号？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.deleteAccount(item);
      }).catch(() => {});
    },
    /* 获取链接地址 */
    getLink () {},

    /* 删除账号 */
    async deleteAccount (item) {
      this.$mtMessage.success("删除成功！");
      this.readList();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mt-list.scss";
.wechat {
  .table {
  }
}
</style>
